<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-demo__dhgodssellinfo}">
      <el-table v-loading="dataListLoading" :data="sellInfoDataList" border @selection-change="dataListSelectionChangeHandle"
                style="width: 100%;">
        <el-table-column prop="id" label="运动物品出售订单编号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="godsId" label="运动物品编号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="userId" label="购买者账号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="sellPrice" label="价格/元" header-align="center" align="center"></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            <el-button type="success" size="small"
                       @click="viewDetails(scope.row.godsId,scope.row.userId,scope.row.sellPrice)">查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <el-dialog title="订单详情" :visible.sync="dialogFormVisible" width="30%">
        <el-form ref="form" :model="sellInfoForm" label-width="80px">
          <el-form-item label="物品编号">
            <el-input v-model="sellInfoForm.godsId"></el-input>
          </el-form-item>
          <el-form-item label="物品名称">
            <el-input v-model="sellInfoForm.godsName"></el-input>
          </el-form-item>
          <el-form-item label="用户账号">
            <el-input v-model="sellInfoForm.userId"></el-input>
          </el-form-item>
          <el-form-item label="用户姓名">
            <el-input v-model="sellInfoForm.userName"></el-input>
          </el-form-item>
          <el-form-item label="花费/元">
            <el-input v-model="sellInfoForm.sellPrice"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="danger" @click="dialogFormVisible = false">关闭</el-button>
        </div>
      </el-dialog>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './dhgodssellinfo-add-or-update'

export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/demo/dhgodssellinfo/page',
        getDataListIsPage: true,
        exportURL: '/demo/dhgodssellinfo/export',
        deleteURL: '/demo/dhgodssellinfo',
        deleteIsBatch: true
      },
      dataForm: {
        id: ''
      },
      sellInfoDataList: [],
      dialogFormVisible: false,
      direction: 'ltr',
      sellInfoForm: {
        godsId: '',
        godsName: '',
        userId: '',
        userName: '',
        sellPrice: ''
      }
    }
  },
  components: {
    AddOrUpdate
  },
  created() {
    this.getSellInfoDataList();
  },
  methods: {
    getSellInfoDataList() {
      this.$http.get('demo/dhgodssellinfo/getSellInfoDataList/' + this.$store.state.user.id)
          .then(({data: res}) => {
            this.sellInfoDataList = res.data;
          }).catch(_ => {
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    /**
     * 查看详情
     * @param godsId
     * @param userId
     * @param sellPrice
     */
    viewDetails(godsId, userId, sellPrice) {
      this.getGodsName(godsId);
      this.getRentUserName(userId);
      this.sellInfoForm.godsId = godsId;
      this.sellInfoForm.userId = userId;
      this.sellInfoForm.sellPrice = sellPrice;
      this.dialogFormVisible = true;
    },
    /**
     * 获取物品名称
     * @param godsId
     */
    getGodsName(godsId) {
      this.$http.get('demo/dhgodsinfo/getGodsName/' + godsId)
          .then(({data: res}) => {
            this.sellInfoForm.godsName = res.data.godsName;
          }).catch(_ => {
      })
    },
    /**
     * 获取购买人姓名
     * @param userId
     */
    getRentUserName(userId) {
      this.$http.get('demo/dhuserinfo/getRentUserName/' + userId)
          .then(({data: res}) => {
            this.sellInfoForm.userName = res.data.userName;
          }).catch(_ => {
      })
    }
  }
}
</script>
